<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>群组详情 - 面对面建群</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
</head>
<body>
<div id="app">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">{{ group.name || '群组详情' }}</a>
            <div class="d-flex text-white align-items-center">
                <span v-if="isCreator" class="badge bg-light text-primary me-2">创建者</span>
                <a href="/" class="btn btn-outline-light btn-sm">
                    <i class="bi bi-house"></i> 返回首页
                </a>
            </div>
        </div>
    </nav>
    <div class="container mt-4">
        <div v-if="loading" class="text-center py-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-3">加载中...</p>
        </div>
        <div v-else class="row">
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">群组信息</h5>
                    </div>
                    <div class="card-body">
                        <h4 class="card-title">{{ group.name }}</h4>
                        <p class="card-text">{{ group.description || '暂无描述' }}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                    <span class="badge bg-info">
                                        <i class="bi bi-people"></i> {{ group.memberCount }}位成员
                                    </span>
                                <span class="badge bg-secondary ms-2">
                                        <i class="bi bi-clock"></i> {{ formatTime(group.createTime) }}创建
                                    </span>
                            </div>
                            <div v-if="isCreator" class="d-flex">
                                <button class="btn btn-outline-primary btn-sm">
                                    <i class="bi bi-share"></i> 邀请码: {{ group.invitationCode }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">群组成员</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div v-for="member in group.members" :key="member.id" class="col-md-4 mb-3">
                                <div class="card h-100">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <i class="bi bi-person-circle" style="font-size: 2rem;"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h6 class="mb-0">{{ member.nickname }}</h6>
                                                <small class="text-muted">{{ member.username }}</small>
                                            </div>
                                            <div v-if="member.id === group.creator?.id">
                                                <span class="badge bg-warning text-dark">创建者</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">位置信息</h5>
                    </div>
                    <div class="card-body">
                        <p>
                            <i class="bi bi-geo-alt"></i>
                            纬度: {{ group.latitude.toFixed(6) }}<br>
                            <i class="bi bi-geo-alt"></i>
                            经度: {{ group.longitude.toFixed(6) }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.37/dist/vue.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    const { createApp, ref, computed, onMounted } = Vue;

    createApp({
        setup() {
            // 状态
            const user = ref(null);
            const group = ref({
                id: null,
                name: '加载中...',
                description: '',
                members: [],
                creator: null,
                createTime: null
            });
            const loading = ref(true);

            // 从URL中获取群组ID
            const getGroupId = () => {
                const urlParams = new URLSearchParams(window.location.search);
                return urlParams.get('id');
            };

            // 计算属性
            const isCreator = computed(() => {
                return user.value && group.value.creator &&
                       user.value.id === group.value.creator.id;
            });

            // 方法
            const checkAuth = () => {
                const token = localStorage.getItem('token');
                const userStr = localStorage.getItem('user');

                if (!token || !userStr) {
                    window.location.href = '/login.html';
                    return;
                }

                user.value = JSON.parse(userStr);
                axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

                // 加载群组信息
                loadGroupInfo();
            };

            const loadGroupInfo = () => {
                const groupId = getGroupId();
                if (!groupId) {
                    window.location.href = '/index.html';
                    return;
                }

                loading.value = true;
                axios.get(`/api/groups/${groupId}`)
                    .then(response => {
                        if (response.data.code === 200) {
                            group.value = response.data.data;
                        } else {
                            alert(response.data.message || '加载群组信息失败');
                            window.location.href = '/index.html';
                        }
                        loading.value = false;
                    })
                    .catch(error => {
                        console.error('Failed to load group info:', error);
                        alert('加载群组信息失败');
                        window.location.href = '/index.html';
                        loading.value = false;
                    });
            };

            const formatTime = (timeStr) => {
                if (!timeStr) return '';
                const date = new Date(timeStr);
                return date.toLocaleString();
            };

            onMounted(() => {
                checkAuth();
            });

            return {
                user,
                group,
                loading,
                isCreator,
                formatTime
            };
        }
    }).mount('#app');
</script>
</body>
</html>
